<template>
  <div class="cc-page-wrap">
    <div class="page-table-section">
      <el-table :data="fiterData" border style="width: 100%">
        <el-table-column  prop="name" label="name" />
        <el-table-column prop="desic" label="desic" />
        <el-table-column prop="time" label="time" />
      </el-table>
    </div>
    <pagination class="page-table-footer" v-model:page="pageIndex" v-model:limit="pageLimit" :total="totalVal" @pagination="pagination" />
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  onMounted,
  ref,
  reactive
} from 'vue'
import Pagination from '@/components/Pagination/index.vue'
import TableList from './table.json'
export default defineComponent({
  components: {
    Pagination
  },
  setup() {
    let tableData = reactive<any>(TableList)
    let fiterData = ref<any>(null)
    // 检查是否响应式
    // console.log(isReactive(tableData), 'isou')
    let totalVal = ref<number>(0)

     const filterData = (arr=[],page=1,limit=10)=>{
        // arr 需要过滤的数组； page 当前页； limit 每页条数；
      let resList = []
      // 获取最大分页数
      const maxPage = Math.ceil(arr.length / limit)
      const newPage = page > maxPage ? maxPage : page
      // limit * 当前页数+1  大于 数组长度，则取数组长度
      const endLimit = limit * newPage > arr.length ? arr.length : limit * newPage
      // 切换数组
      resList = arr.slice(limit * (newPage - 1), endLimit)
      return resList
    }

    let pageIndex = ref<number>(1)
    let pageLimit = ref<number>(10)

    const pagination = () => {
      initData()
    }
    const initData = () => {
      totalVal.value = tableData.length
      fiterData.value = filterData(tableData,pageIndex.value,pageLimit.value)
    }

    onMounted(() => {
      initData()
    })

    return {
      totalVal,
      initData,

      tableData,
      fiterData,
      filterData,
     
      pageIndex,
      pageLimit,
      pagination
    }
  }
})
</script>

<style lang="scss" scoped>

</style>
